<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="head-box">
			<view class="box-nav">
				<view class="con-nav">
					<view class="nav-l">
						<image src="/static/images/home/icon_search.png"></image>
						<input class="uni-input" type="search" @change="onSearch" @search="onSearch" @clear="clearSearch" v-model="searchVal" :showAction="false" placeholder="搜索妳想要的商品" @input="onSearch()" />
					</view>
					<view class="nav-c" @tap="handleJumpMessage()">
						<image src="/static/images/home/icon_msg.png"></image>
					</view>
					<view class="nav-r" @tap="changeLang('down')">
						<view>{{ currentLangText }}</view>
						<image src="/static/images/home/icon_arrow_b.png"></image>
						<view class="n-r-modal" :class="currentDown==1?'down':currentDown==2?'up':''" @click="changeLang('up')">{{ (currentLangText=='繁体')?'英文':'繁体' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-waterfall" v-if="!isEmpty">
			<view class="goods-box" v-for="(item,index) in goodsList" :key="index" @tap="handleYY(item)" >
				<view class="img-box">
					<image class="goods-img" lazy-load fade-show :src="`${$imgUrl}${item.image}`" mode="aspectFill"></image>
				</view>
				<view class="goods-bottom u-p-14">
					<view class="title u-ellipsis-2 u-m-b-10">
						{{ item.title }}
					</view>
					<view class="p-c-row">
						<view class="price-box">
							<view class="price u-m-b-10">HK$<text>{{ item.price }}</text><text></text></view>
						</view>
						<!-- 加入购物车 -->
						<view class="cart-box">
							<text @tap="handleYY(item)">立即預約</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view id="u-left-column" class="u-column">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList" :key="leftGoods.id">
					<shopro-goods-card
						:detail="leftGoods"
						:image="leftGoods.image"
						:title="leftGoods.title"
						:subtitle="leftGoods.subtitle"
						:price="leftGoods.price"
						:originPrice="leftGoods.original_price"
						:sales="leftGoods.sales"
						:tagTextList="leftGoods.activity_discounts_tags"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
					></shopro-goods-card>
				</view>
			</view>
			<view id="u-right-column" class="u-column">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList" :key="rightGoods.id">
					<shopro-goods-card
						:detail="rightGoods"
						:image="rightGoods.image"
						:title="rightGoods.title"
						:subtitle="rightGoods.subtitle"
						:price="rightGoods.price"
						:originPrice="rightGoods.original_price"
						:sales="rightGoods.sales"
						:tagTextList="rightGoods.activity_discounts_tags"
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })"
					></shopro-goods-card>
				</view>
			</view> -->
		</view>
		<!-- 缺省页 -->
		<!-- <shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty> -->
		<!-- 加载更多 -->
		<!-- <u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
		<!-- 登录弹窗 -->
		<!-- <shopro-auth-modal></shopro-auth-modal> -->
	</view>
</template>

<script>
import { productList } from '../../utils/api'
export default {
	components: {
	},
	data() {
		return {
			isEmpty: false,
			goodsList: [],
			searchVal: '',
			listParams: {
				title: '',
				page: 1,
				limit:10,
			},
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			// 瀑布流 350-330
			addTime: 20, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			tempList: [],
			currentLang: 0,
			currentDown: 0,
			currentLangText: '繁体',
			has_more:false,
		};
	},
	// 触底加载更多
	onReachBottom() {
		if (this.has_more) {
			this.listParams.offset += 1
			this.getGoodsList();
		}
	},
	onShow() {
		this.goodsList=[]
		this.getGoodsList()
	},
  onPullDownRefresh() {
    this.goodsList=[]
		this.listParams.offset = 1
    this.getList()
	},
	methods: {
		handleYY(item){
			uni.navigateTo({
				url: `/pages/goods/detail?id=${item.id}`
			})
		},
		handleJumpMessage(){
			uni.navigateTo({
				url: `/pages/index/message`
			})
		},
		changeLang(type){
			if(type=='down'){
				this.currentDown = 1 -  this.currentDown
			}else{
				this.currentLang = 1 - this.currentLang
				this.currentLangText = this.currentLang == 1 ? '英文' : '繁体'
			}
		},
		// 瀑布流相关
		async splitData() {
			if (!this.tempList.length) return;
			let item = this.tempList[0];
			if (!item) return;
			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		clear() {
			// this.leftList = [];
			// this.rightList = [];
			// this.leftHeight = 0;
			// this.rightHeight = 0;
			// this.tempList = [];
		},
		// 键盘搜索,输入搜索
		onSearch() {
			this.goodsList = []
			this.listParams.offset = 1
			this.lastPage = 1
			this.listParams.title = this.searchVal
			this.getGoodsList()
		},
		// 队列
		getArr(list, item) {
			let arr = list;
			let length = 10; //队列长度
			arr.length < length ? arr.unshift(item) : arr.pop();
			return arr;
		},
		// 清除搜索框
		clearSearch() {
			this.searchVal = '';
			this.goodsList = []
			this.listParams.offset = 1
			this.lastPage = 1
			this.listParams.title = this.searchVal
			this.getGoodsList()
		},
		// 商品列表
		async getGoodsList() {
			let that = this;
			that.loadStatus = 'loading';
			let res = await productList(that.listParams)
			if (res.code === 1) {
				that.goodsList = [...that.goodsList, ...res.data.data]
				that.isEmpty = !that.goodsList.length
				that.lastPage = res.data.last_page
				that.has_more=res.data.has_more
				that.loadStatus = that.listParams.offset < res.data.last_page ? 'loadmore' : 'nomore';
				// that.tempList = res.data.data;
				// that.splitData();
			}
		}
	}
};
</script>
<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.list-box{
	background: #F4F6FA;
	border-top: 1px solid transparent;
}
.u-waterfall {
	@include vue-flex;
	align-items: flex-start;
	flex-wrap: wrap;
	width: calc(100% - 20px);
	margin: 0 auto;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}
.u-column:last-child{
	padding-left: 5px;
}
.head-box {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 998;
	background: #fff;
	margin-bottom: 15px;
}

.box-nav{
	width: 100%;
	background: #F4F6FA;
}
.con-nav{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 35px;
	width: 100%;
	margin: 10px auto 0;
}
.nav-l{
	width: 67%;
	border-radius: 17.5px;
	background: #fff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
	image{
		width: 18px;
		height: 18px;
		margin-left: 18px;
	}
	input{
		width: calc(100% - 40px);
		height: 35px;
		margin-left: 12px;
	}
}
.nav-c{
	width: 5%;
	height: 20px;
	image{
		width: 100%;
		height: 100%;
	}
}
@keyframes slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
		transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.nav-r{
	width: 14%;
	height: 100%;
	font-size: 15px;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	image{
		width: 12px;
		height: 8px;
	}
	.n-r-modal{
		width: 66px;
		height: 40px;
		line-height: 40px !important;
		font-size: 14px;
		color: #333333;
		line-height: 20px;
		text-align: center;
		position: absolute;
		top: 40px;
		right: 0;
		background: #FFFFFF;
		box-shadow: 0px 5px 8px 0px rgba(122,124,129,0.23);
		border-radius: 5px;
		opacity: 0;
	}
	.n-r-modal.up{
		animation: slide-up .5s ease forwards;
	}
	.n-r-modal.down{
		animation: slide-down .5s ease forwards;
	}
}
.p-c-row{
	width: calc(100% - 20px);
	margin: 0 auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.goods-box {
	width: 345rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 0 0 10px 0;
	margin-bottom: 10px;
	.goods-bottom {
		background-size: 100% 100%;
		background-position: bottom center;
		background-repeat: no-repeat;
		margin: 0 auto;
	}
	.img-box {
		width: 345rpx;
		height: 345rpx;
		overflow: hidden;
		position: relative;
		background-color: #fff;
		border-radius: 6rpx;
		.goods-img {
			width: 345rpx;
			height: 345rpx;
			background-color: #ccc;
		}
	}
	.img-box3{
		width: 345rpx;
		height: auto;
		overflow: hidden;
		position: relative;
		background-color: #fff;
		border-radius: 6rpx;
		.goods-img {
			width: 345rpx;
			height: auto;
			background-color: #ccc;
		}
	}
	.title {
		width: calc(100% - 20px);
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 20px;
		color: #333333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 5px;
	}
	.price-box {
		font-size: 10px;
		font-weight: 600;
		width: calc(100% - 70px);
		.price {
			color: #ff3000;
			text{
				font-size: 14px;
			}
			text:first-child{
				font-size: 16px;
				margin-left: 2px;
			}
		}
	}
	// 购物车
	.cart-box {
		width: 70px;
		height: 30px;
		background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
		border-radius: 5px;
		font-weight: 500;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
	}
}
.goods-box:nth-child(2n+1){
	margin-right: 10px;
}
</style>
